<template>
	<div class="home">
		<!-- 搜索 -->
		<van-search v-model="value" placeholder="请输入搜索关键词" background="#E43130" shape="round" @search="onSearch">
			<van-image :src="img.menu" slot="left" width="20" height="20" class="search-left-icon"></van-image>
			<van-image :src="img.jd" slot="left-icon" width="20" height="20" class="search-icon"></van-image>
			<van-image :src="img.search" slot="right-icon" width="20" height="20" class="search-icon"></van-image>
		</van-search>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="150">
			<van-swipe-item v-for="(swipe, index) in img.swipe" :key="index"><img v-lazy="swipe" /></van-swipe-item>
		</van-swipe>
		<!-- 推荐 -->
		<div class="recommend-wrapper">
			<div class="recommend-item1">
				<van-image :src="img.recommend.left"></van-image>
				<div class="left-wrapper">
					<van-image :src="img.recommend.left_center" class="icon"></van-image>
				</div>
			</div>
			<div class="recommend-item2">
				<van-image :src="img.recommend.center"></van-image>
				<div class="center-wrapper">
					<van-image :src="img.recommend.center_left" class="icon"></van-image>
					<van-image :src="img.recommend.center_right" class="icon"></van-image>
				</div>
			</div>
			<div class="recommend-item3">
				<van-image :src="img.recommend.right"></van-image>
				<div class="right-wrapper">
					<van-image :src="img.recommend.right_center" class="icon"></van-image>
				</div>
			</div>
		</div>
		<!-- 菜单入口 -->
		<van-swipe class="my-swipe-entry" indicator-color="#FA2C19" @change="onChange">
			<van-swipe-item>
				<div class="entry-item-wrapper">
					<div v-for="(entryImg, index) in img.entry" :key="index" class="entry-item" @click="openUrl(index)">
						<van-image :src="entryImg.img" width="40" height="40"></van-image>
						<span class="title">{{ entryImg.text }}</span>
					</div>
				</div>
			</van-swipe-item>
			<van-swipe-item>
				<div class="entry-item-wrapper">
					<div v-for="(entryImg, index) in img.entry" :key="index" class="entry-item" @click="openUrl(index)">
						<van-image :src="entryImg.img" width="40" height="40"></van-image>
						<span class="title">{{ entryImg.text }}</span>
					</div>
				</div>
			</van-swipe-item>
		</van-swipe>
		<!-- 秒杀 -->
		<div class="seckill-wrapper">
			<div class="seckill-top-wrapper">
				<div class="seckill-top-left">
					<span>京东秒杀</span>
					<span class="time1">17</span>
					<van-image :src="img.seckill.seckill_time" width="20" height="20" style="margin-right: 10px;">
					</van-image>
					<div class="time2">00</div>
					<span class="punctuation">:</span>
					<div class="time2">00</div>
					<span class="punctuation">:</span>
					<div class="time2">00</div>
				</div>
				<div>
					<span class="seckill-top-right">更多秒杀</span>
					<van-image :src="img.seckill.arrow_rt" width="12" height="12" style="margin-left: 2px;"></van-image>
				</div>
			</div>
			<div class="seckill-bottom-wrapper">
				<div class="seckill-item" v-for="(item, index) in img.seckill.goods" :key="index">
					<van-image :src="item.img" class="seckill-img"></van-image>
					<span class="seckill-price">￥{{ item.price }}</span>
				</div>
			</div>
		</div>
		<!-- 商品图表 -->
		<div class="graphic-wrapper" v-for="(goodsItem, index) in img.graphic.goods" :key="index">
			<div class="graphic-item" v-for="(item, index) in goodsItem" :key="index"
				:class="[index % 2 == 0 ? 'background2' : 'background1']">
				<div>
					<van-image :src="item.img" width="60" height="60" style="margin-top: 10px;"></van-image>
				</div>
				<div class="graphic-item-title">
					<span class="title">{{ item.title1 }}</span>
					<span class="title">{{ item.title2 }}</span>
				</div>
			</div>
		</div>
		<!-- 异形轮播 -->
		<swiper :options="swiperOption" v-if="img.swipe.length" class="swiper-wrapper">
			<swiper-slide v-for="(item,index) of img.swipe" :key="index">
				<img class="slide-img" :src="item" />
			</swiper-slide>
		</swiper>
		<!-- 商品列表 -->
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<ProductList :productList="productList"></ProductList>
		</van-list>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Vue from 'vue';
	import ProductList from '@/components/ProductList.vue'
	import {
		Lazyload
	} from 'vant';
	import {
		Swiper,
		SwiperSlide
	} from 'vue-awesome-swiper';
	import 'swiper/css/swiper.css';

	Vue.use(Lazyload);
	export default {
		name: 'Home',
		data() {
			return {
				loading: false,
				finished: false,
				productList: [{
						img: require('@/assets/home/productiList/1.jpg'),
						describe: '飞利浦（PHILIPS）SBM230无线喇叭小蜜蜂扩音器UHF麦克风便携音箱教师导游培训讲师消噪播放器象牙白',
						productId: 1,
						price: 99.00,
						isActivity: true,
						activityName: '闪购',
						isAutarky: true
					},
					{
						img: 'https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/192542/29/16208/186965/61064c0fE98709df9/3abbcd6917f382d4.jpg!q70.dpg.webp',
						describe: '格子兮老爹鞋女春季韩版2021新款网红炸街透气夏季运动休闲小白潮鞋椰子鞋飞织 黑色 40',
						productId: 1,
						price: 16.80,
						isActivity: false,
						isAutarky: false,
						discountPrice: 12.88,
						isDiscount: true
					},
					{
						img: 'https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/138907/26/22713/123989/618a5f5fE4b090381/7a03143c5b0ef819.jpg!q70.dpg.webp',
						describe: '展昂黑白卡通暴力熊钥匙扣黑白绳挂件汽车配件包包挂饰 一个',
						productId: 1,
						price: 199.00,
						isActivity: false,
						isAutarky: false
					},
					{
						img: 'https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/211492/32/6958/153965/617900daE578c96b3/1cd0e97de6e223f8.jpg!q70.dpg.webp',
						describe: '二棉鞋男冬季2021新款加绒加厚保暖居家用防滑无后跟包头洞洞拖鞋 米色 39',
						productId: 1,
						price: 2423.00,
						isActivity: true,
						activityName: '拼购',
						isAutarky: false
					},
					{
						img: 'https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/155704/32/23779/106019/618ce01fE3e320f67/85141b61f6a5196e.jpg!q70.dpg.webp',
						describe: '十月结晶小小梦想家婴儿纸尿裤NB码-42片（出生-5kg） 干爽透气宝宝尿不湿',
						productId: 1,
						price: 8888.00,
						isActivity: true,
						activityName: '新品',
						isAutarky: true
					}
				],
				swiperOption: {
					slidesPerView: 2.09,
					centeredSlides: true,
					loop: true, //开启loop模式
					loopAdditionalSlides: 1, //在slides前后复制若干个slide
					touchRatio: 1, //触摸距离与slide滑动距离的比率
					spaceBetween: 0,
					initialSlide: 0, //初始索引
					on: {
						slideChange: function() {
							console.log('当前索引' + this.activeIndex);
						},
						click: function() {
							if (this.activeIndex != this.clickedIndex) {
								this.slideTo(this.clickedIndex)
							} else {
								console.log('点击了' + this.clickedIndex)
							}
						},
						touchMove: function(swiper, event) {
							console.log(swiper)
						}
					}
				},
				value: null,
				img: {
					menu: require('@/assets/home/tabbar/menu.png'),
					jd: require('@/assets/home/tabbar/jd.png'),
					search: require('@/assets/home/tabbar/search.png'),
					swipe: [
						require('@/assets/home/swipe/1.jpg'),
						require('@/assets/home/swipe/2.jpg'),
						require('@/assets/home/swipe/3.jpg'),
						require('@/assets/home/swipe/4.jpg'),
						require('@/assets/home/swipe/5.jpg'),
						require('@/assets/home/swipe/6.jpg')
					],
					recommend: {
						left: require('@/assets/home/recommend/left.jpg'),
						left_center: require('@/assets/home/recommend/left-center.jpg'),
						center: require('@/assets/home/recommend/center.gif'),
						center_left: require('@/assets/home/recommend/center-left.jpg'),
						center_right: require('@/assets/home/recommend/center-right.jpg'),
						right: require('@/assets/home/recommend/right.jpg'),
						right_center: require('@/assets/home/recommend/right-center.jpg')
					},
					entry: [{
							img: require('@/assets/home/entry/1.jpg'),
							text: '京东国际'
						},
						{
							img: require('@/assets/home/entry/2.jpg'),
							text: '京东拍卖'
						},
						{
							img: require('@/assets/home/entry/3.jpg'),
							text: '看病购药'
						},
						{
							img: require('@/assets/home/entry/4.jpg'),
							text: '玩3C'
						},
						{
							img: require('@/assets/home/entry/5.jpg'),
							text: '沃尔玛'
						},
						{
							img: require('@/assets/home/entry/6.jpg'),
							text: '美妆馆'
						},
						{
							img: require('@/assets/home/entry/7.jpg'),
							text: '京东旅游'
						},
						{
							img: require('@/assets/home/entry/8.jpg'),
							text: '拍拍二手'
						},
						{
							img: require('@/assets/home/entry/9.jpg'),
							text: '9.9元拼'
						},
						{
							img: require('@/assets/home/entry/10.jpg'),
							text: '全部'
						}
					],
					seckill: {
						seckill_time: require('@/assets/home/seckill/seckill-time.png'),
						arrow_rt: require('@/assets/home/seckill/arrow-rt.png'),
						goods: [{
								img: require('@/assets/home/seckill/1.jpg'),
								price: 20,
								commodity_id: 1
							},
							{
								img: require('@/assets/home/seckill/2.jpg'),
								price: 9.9,
								commodity_id: 2
							},
							{
								img: require('@/assets/home/seckill/3.jpg'),
								price: 99,
								commodity_id: 3
							},
							{
								img: require('@/assets/home/seckill/4.jpg'),
								price: 52,
								commodity_id: 4
							},
							{
								img: require('@/assets/home/seckill/5.jpg'),
								price: 76.05,
								commodity_id: 5
							},
							{
								img: require('@/assets/home/seckill/6.jpg'),
								price: 18.8,
								commodity_id: 6
							}
						]
					},
					graphic: {
						bgimg: require('@/assets/home/graphic/background-img1.jpg'),
						goods: [
							[{
									img: require('@/assets/home/graphic/1.jpg'),
									title1: '生活家居',
									title2: '超可爱环形枕头',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/2.jpg'),
									title1: '微单相机榜',
									title2: '单镜头中高级',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/3.jpg'),
									title1: '家用投影仪',
									title2: '家用',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/4.jpg'),
									title1: '手机臂包榜',
									title2: '运动臂包',
									commodity_id: 1
								}
							],
							[{
									img: require('@/assets/home/graphic/1.jpg'),
									title1: '生活家居',
									title2: '超可爱环形枕头',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/2.jpg'),
									title1: '微单相机榜',
									title2: '单镜头中高级',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/3.jpg'),
									title1: '家用投影仪',
									title2: '家用',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/4.jpg'),
									title1: '手机臂包榜',
									title2: '运动臂包',
									commodity_id: 1
								}
							],
							[{
									img: require('@/assets/home/graphic/1.jpg'),
									title1: '生活家居',
									title2: '超可爱环形枕头',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/2.jpg'),
									title1: '微单相机榜',
									title2: '单镜头中高级',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/3.jpg'),
									title1: '家用投影仪',
									title2: '家用',
									commodity_id: 1
								},
								{
									img: require('@/assets/home/graphic/4.jpg'),
									title1: '手机臂包榜',
									title2: '运动臂包',
									commodity_id: 1
								}
							]
						]
					}
				}
			};
		},
		mounted() {
			this.$nextTick(() => {
				var swiper = new Swiper('.swiper-container', {
					effect: 'coverflow',
					loop: true,
					grabCursor: true,
					centeredSlides: true,
					slidesPerView: 'auto',
					autoplay: 3000,
					autoplayDisableOnInteraction: false,
					coverflow: {
						rotate: 10,
						stretch: 0,
						depth: 100,
						modifier: 1,
						slideShadows: false,
					},
					spaceBetween: 30,
				});
			});
			console.log('Current Swiper instance object', this.swiper);
			// this.swiper.slideTo(3, 1000, false);
		},
		computed: {
			swiper() {
				// return this.$refs.mySwiper.$swiper;
			}
		},
		methods: {
			onSearch(val) {
				console.log('搜索:' + val);
			},
			onChange(index) {
				console.log('当前 Swipe 索引：' + index);
			},
			openUrl(index) {
				console.log('当前点击：' + index);
			},
			onSwiper(swiper) {
				console.log(swiper);
			},
			onSlideChange() {
				console.log('slide change');
			},
			onLoad() {
				console.log('上拉到底了')
			}
		},
		components: {
			Swiper,
			SwiperSlide,
			ProductList
		}
	};
</script>
<style lang="scss" scoped>
	.swiper-wrapper {
		margin-top: 10px;

		.slide-img {
			width: 200px;
			height: 100px;
		}

		.swiper-slide:not(.swiper-slide-active) {
			transition: 400ms;
			transform: scale(0.85);
		}
	}

	.graphic-wrapper {
		display: flex;
		width: 95%;
		margin: 0 auto;
		justify-content: space-around;

		.background1 {
			background-image: url(../assets/home/graphic/background-img1.jpg);
		}

		.background2 {
			background-image: url(../assets/home/graphic/background-img2.jpg);
		}

		.graphic-item {
			width: 24%;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-size: 100% 100%;
			height: 120px;

			.graphic-item-title {
				display: flex;
				flex-direction: column;
				text-align: center;
				margin-top: 10px;

				.title {
					color: #ffffff;
					line-height: 15px;
					font-size: 13px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 80px;
				}
			}
		}
	}

	.seckill-wrapper {
		width: 88%;
		// height: 90px;
		background-color: #ffffff;
		margin: 0 auto;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		flex-direction: column;

		.seckill-top-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.seckill-top-left {
				font-size: 13px;
				display: flex;
				align-items: center;

				.time1 {
					color: red;
					text-indent: 1em;
				}

				.time2 {
					background-color: #fa2c19;
					padding: 2px 1px;
					border-radius: 2px;
					color: #ffffff;
				}

				.punctuation {
					color: #fa2c19;
					font-size: 12px;
					font-weight: 600;
				}
			}

			.seckill-top-right {
				font-size: 12px;
				color: #fa2c19;
			}
		}

		.seckill-bottom-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;

			.seckill-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.seckill-img {
					margin-bottom: 10px;
				}

				.seckill-price {
					font-size: 12px;
					color: #fa2c19;
					font-weight: 600;
				}
			}
		}
	}

	.recommend-wrapper {
		display: flex;
		width: 100%;
		margin-top: 5px;
		justify-content: center;

		.recommend-item1 {
			position: relative;

			.left-wrapper {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 60%;
					height: 50%;
					margin-top: -10px;
					margin-left: 5px;
				}
			}
		}

		.recommend-item2 {
			position: relative;

			.center-wrapper {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.icon {
					height: 50%;
					width: 30%;
				}
			}
		}

		.recommend-item3 {
			position: relative;

			.right-wrapper {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 60%;
					height: 50%;
					margin-top: -10px;
					margin-right: 5px;
				}
			}
		}
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		background-color: #39a9ed;

		img {
			background-size: 100% 100%;
			height: 100%;
			width: 100%;
		}
	}

	.my-swipe-entry .van-swipe-item {
		margin-top: 20px;
		height: 170px;

		.entry-item-wrapper {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.entry-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;
			}

			.title {
				line-height: 40px;
				font-size: 13px;
			}
		}
	}

	::vue-deep .van-swipe__indicator {
		background-color: #757575;
	}

	.home {
		background-color: #f2f2f2;
		padding-bottom: 70px;

		.search-left-icon {
			margin-right: 10px;
		}

		.search-icon {
			vertical-align: middle;
		}
	}
</style>
